<template>

  <template v-if="year">
    <div class="year-wrapper">
      <h2 class="year-title">{{ year }}年</h2>
      <div class="year-divider"></div>
    </div>
  </template>

  <!-- 原有：单条记录内容 -->
  <div ref="cardRef" class="charge-record-card">
    <!-- 订单编号和花费行 -->
    <div class="row first-row">
      <div class="item left-item">
        <span class="label first-label">订单编号：</span>
        <span class="value order-id first-value"> {{ orderId.slice(-10) }}</span>
      </div>
      <div class="item right-item">
        <span class="label first-label">花费：</span>
        <span class="value cost first-value">{{ cost }}元</span>
      </div>
    </div>
    
    <!-- 原有：VIN、充电桩ID、时间等行（保持不变） -->
    <div class="row">
      <div class="item full-width">
        <span class="label">VIN：</span>
        <span class="value">{{ vin }}</span>
      </div>
    </div>
    <div class="row">
      <div class="item full-width">
        <span class="label">充电桩ID：</span>
        <span class="value">{{ chargerId }}</span>
      </div>
    </div>
    <div class="row">
      <div class="item full-width">
        <span class="label">开始时间：</span>
        <span class="value">{{ startTime }}</span>
      </div>
    </div>
    <div class="row">
      <div class="item full-width">
        <span class="label">结束时间：</span>
        <span class="value">{{ endTime }}</span>
      </div>
    </div>
    <div class="row">
      <div class="item left-item">
        <span class="label">充电时长：</span>
        <span class="value">{{ duration }}</span>
      </div>
      <div class="item right-item">
        <span class="label">充电电量：</span>
        <span class="value">{{ energy }}度</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { defineProps } from 'vue';
// 新增：引入路由钩子，用于返回上一页
import { useRouter } from 'vue-router';

// 新增：初始化路由实例
const router = useRouter();

// 原有：组件属性定义（保持不变）
const props = defineProps({
  year: { type: String, default: '' },
  orderId: { type: String, required: true },
  cost: { type: Number, required: true },
  vin: { type: String, required: true },
  chargerId: { type: String, required: true },
  startTime: { type: String, required: true },
  endTime: { type: String, required: true },
  duration: { type: String, required: true },
  energy: { type: Number, required: true }
});

// 新增：返回上一页的事件处理函数
const handleGoBack = () => {
  // go(-1) 表示返回浏览器历史记录的上一页，等同于点击浏览器“后退”按钮
  router.go(-1);
  // 若需指定返回某特定页面（如首页），可替换为：router.push('/home')
};

// 原有：动态调整字体大小逻辑（保持不变）
const cardRef = ref(null);
let resizeObserver = null;

onMounted(() => {
  resizeObserver = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
      const card = entry.target;
      const rows = card.querySelectorAll('.row');
      rows.forEach((row) => {
        const initialFontSize = row.classList.contains('first-row') ? '12px' : '10px';
        row.style.fontSize = initialFontSize;
        
        if (row.scrollWidth > row.offsetWidth) {
          const minFontSize = row.classList.contains('first-row') ? 9 : 7;
          let fontSize = parseInt(initialFontSize);
          
          while (fontSize > minFontSize) {
            fontSize--;
            row.style.fontSize = `${fontSize}px`;
            if (row.scrollWidth <= row.offsetWidth) break;
          }
        }
      });
    });
  });

  if (cardRef.value) resizeObserver.observe(cardRef.value);
});

onUnmounted(() => {
  if (resizeObserver && cardRef.value) {
    resizeObserver.unobserve(cardRef.value);
    resizeObserver.disconnect();
  }
});
</script>

<style scoped>
/* 新增：返回按钮样式 */
.back-btn-wrapper {
  margin: 8px 12px 10px; /* 上8px、左右12px、下10px，与下方年份区域对齐 */
}
.back-btn {
  background: #f5f5f5; /* 浅灰色背景，适配卡片风格 */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 12px; /* 上下4px、左右12px，控制按钮大小 */
  font-size: 12px; /* 字体大小适配整体布局 */
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px; /* 箭头与文字的间距 */
  transition: background 0.2s; /* hover 过渡效果，提升交互感 */
}
.back-btn:hover {
  background: #eee; /*  hover 时加深背景色 */
}
/* 移除按钮默认聚焦样式（可选，避免点击后出现边框） */
.back-btn:focus {
  outline: none;
}

/* 原有：年份标题样式（保持不变） */
.year-wrapper {
  margin-bottom: 10px;
}
.year-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 3px 8px;
  font-weight: 800;
}
.year-divider {
  height: 1px;
  background: #999;
  margin: 0 16px 0 8px;
}

/* 原有：卡片及其他样式（保持不变） */
.charge-record-card {
  background: url('/src/assets/RectangularBg.png') no-repeat center/cover;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  overflow: hidden;
  width: 100%;
  line-height: 1.2;
}
.first-row {
  font-size: 12px;
  margin-bottom: 4px;
}
.item {
  display: flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}
.left-item {
  flex: 1;
  justify-content: flex-start;
}
.right-item {
  flex: 0 0 auto;
  min-width: 120px;
  justify-content: flex-start;
}
.full-width {
  width: 100%;
  justify-content: flex-start;
}
.label {
  color: #666;
  font-size: 14px;
}
.first-label {
  color: #444;
  font-size: 14px;
  font-weight: 500;
}
.value {
  flex: 0 0 auto;
  text-align: left;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.first-value {
  font-size: 14px;
  font-weight: 500;
}
.order-id {
  font-weight: 600;
}
.charge-energy-item {
  transform: none;
}

/* 原有：小屏幕适配（保持不变，可按需调整返回按钮样式） */
@media (max-width: 320px) {
  .row {
    font-size: 9px;
  }
  .first-row {
    font-size: 11px;
  }
  .first-label, .first-value {
    font-size: 10px;
  }
  .label {
    font-size: 8px;
  }
  .value {
    font-size: 9px;
  }
  .item {
    gap: 0;
  }
  .year-title {
    font-size: 11px;
  }
  .right-item {
    min-width: 100px;
  }
  /* 新增：小屏幕下调整返回按钮大小 */
  .back-btn {
    padding: 3px 10px;
    font-size: 11px;
  }
}
</style>